<template>
  <div>
    <el-skeleton
      style="width: 100%"
      animated
      :count="3"
      :loading="isLoading"
      :throttle="500"
    >
      <template slot="template">
        <div
          class="ecard"
          style="
            min-height: 80px;
            padding: 20px;
            background-color: #fff;
            width: calc(83% - 40px)
            border: 1px solid black;
          "
        >
          <el-skeleton-item variant="h1" style="width: 30%" />
          <el-divider></el-divider>
          <el-skeleton-item variant="text" style="width: 100%" />
          <el-skeleton-item variant="text" style="width: 50%" />
        </div>
      </template>
      <template>
        <el-card
          :key="item.id"
          class="ecard"
          v-for="(item, index) in ecardList"
        >
          <div @click="onClickEcardItem(item.id)">
            <b>{{ item.title }}</b>
            <el-divider></el-divider>
            <p v-once>{{ getEcardItemDesc(index) }}</p>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import { getEcardList } from "@/api/ecard";

export default {
  data() {
    return {
      ecardList: [],
      isLoading: true,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    getEcardItemDesc(index) {
      let msgItem = this.ecardList[index];
      let descStr1 = `起于${msgItem.beginTime}，终于${msgItem.endTime}，在奔赴目标的日子里，每天都很充实`;
      let descStr2 = `起于${msgItem.beginTime},在奔赴终点的日子里，每天都要正气满满`;
      let descStr = msgItem.endTime ? descStr1 : descStr2;
      return msgItem.description ? msgItem.description : descStr;
    },
    loadData() {
      let that = this;
      getEcardList()
        .then((res) => {
          that.ecardList = res;
          that.isLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickEcardItem(id) {
      let toPath = `/timeline/${id}`;
      if (this.$route.path !== toPath) {
        this.$router.push(toPath);
      }
    },
  },
};
</script>

<style scope>
.ecard {
  width: 83%;
  margin: 0 auto 3px 3%;
  text-align: left;
  min-height: 80px;
}
</style>